<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两种定时器</title>
</head>
<body>
    <!-- window 对象给我们提供了两种定时器
    setTimeout() 定时器
       window.setTimeout(调用函数，[延迟的毫秒数]);
       setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
    
   -->
    <script>
    //    setTimeout() 定时器
    //    window.setTimeout(调用函数，[延迟的毫秒数]);
    //  1 window 在调用的时候可以省略
    //  2 这个延迟时间单位是毫秒 但是可以省略，如果省略 默认值是 0 
    //  3 这个调用可以直接写函数 还可以写函数名  还有一个写法 '函数名()'
    //  4 页面中可能有很多个定时器，我们经常给定时器 加 标识符 （名字）
    // setTimeout(function() {
    //     console.log('时间到了');
    // }, 2000);



    // function calkback(){
    //     console.log('爆炸了');
    // }
    // setTimeout(calkback,3000);
    // setTimeout('calkback()',3000); // 不提倡用这个
    // var timer1 = setTimeout(calkback,3000);
    // var timer2 = setTimeout(calkback,5000);
    // var timer3 = setTimeout(calkback,4000);
    </script>

    <!-- 停止 setTimeout()定时器
    window.clearTimeout(timeout ID)  (定时器的名字)-->
        <button>点击停止定时器</button>
        <script>
            var btn = document.querySelector('button');
            var timer1 = setTimeout(function(){
                console.log('爆炸了');
            },5000);
            btn.addEventListener('click',function(){
                clearTimeout(timer1)
            })
        </script>


        <!-- setInterval()定时器 -->
        <!--window.setInterval(回调函数，[间隔的毫数秒]);
        setInterval() 方法重复调用一个函数 每隔这个事件 就去调用一次回调函数
       //  1 window 在调用的时候可以省略
       //  2 这个延迟时间单位是毫秒 但是可以省略，如果省略 默认值是 0 
       //  3 这个调用可以直接写函数 还可以写函数名  还有一个写法 '函数名()'
       //  4 页面中可能有很多个定时器，我们经常给定时器 加 标识符 （名字）
 -->
           <script>

            //    1 setInterval
            //    2 语法规范  window.setInterval(回调函数，[间隔的毫数秒]);
              setInterval(function() { 
                  console.log('继续输出');
              },1000)

            //   setTimeout  延时时间到了 就去调用这个 回调函数 只调用一次就结束了这个定时器
            //   setInterval 每隔这个延时时间 就去调用这个函数 回调用很多次 重复调用这个函数

            //   停止  setInterval() 定时器
            // window.clearInterval(interval ID);
           </script> 

           <button class="begin">开启定时器</button>
           <button class="stop">停止定时器</button>
           <script>
               var begin = document.querySelector('.begin');
               var stop = document.querySelector('.stop');
               var timer2 = null; //全局变量  null 是一个空的变量
               begin.addEventListener('click',function(){
                       timer2 = setInterval(function(){
                       console.log('你好吗');
                   },1000)
               })
               stop.addEventListener('click',function(){
                   clearInterval(timer2);
               })
           </script>
</body>
</html>